<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--if-->
<div id="app-1">
    <p v-if="awesome">Vue is awesome!</p>
    <p v-else>Oh no 😢</p>
</div>
<script>
    new Vue({
        el: "#app-1"
        , data: {
            awesome: false
        }
    })
</script>

<!--template if-->
<div id="app-2">
    <template v-if="ok">
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template>
    <template v-else>
        <p>no</p>
    </template>
</div>
<script>
    new Vue({
        el: '#app-2'
        , data: {ok: false}
    })
</script>

<div id="app-3">
    <div v-if="Math.random() > 0.5">
        Now you see me
    </div>
    <div v-else>
        Now you don't
    </div>
</div>
<script>
    new Vue({
        el: "#app-3"
        , data: {}
    })
</script>

<div id="app-4">
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
</div>
<script>
    new Vue({
        el: "#app-4"
        , data: {
            type: "!"
        }
    })
</script>

<div id="app-5">
    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address">
    </template>
    <!--不支持 template 频繁切换显示隐藏建议使用show-->
    <h1 v-show="ok">Hello!</h1>
</div>
<script>
    new Vue({
        el: '#app-5'
        , data: {
            loginType: 'username'
            , ok: true
        }
    })
</script>

</body>
</html>